/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";
@import "../../styles/themes/cdap/mixins.less";
body.state-dashboard {

  main {
    margin-top: 65px;
    .row:first-child { margin-bottom: 25px; }

    aside {
      float: right;
      margin: 8px 0 0 12px;
    }
    div.form-inline {
      background-color: #d1d3da;
      padding: 10px 15px;
      margin-top: -10px;
      div[uib-dropdown] {
        display: inline-block;
        position: relative;
        .dropdown-menu {
          .border-radius(0);
          > li:first-child a { .border-radius(0); }
        }
        &.open {
          .dropdown-toggle {
            .border-radius(4px 4px 0 0);
            + .dropdown-menu { min-width: 97px; }
          }
        }
      }
      @media (max-width: @screen-xs-max) {
        .form-group:last-child {
          margin-top: 20px;
          text-align: center;
        }
      }
      @media (max-width: @screen-sm-max) {
        text-align: left;
        .dropdown-menu { left: 0; }
        .addon-label { display: inline-block; width: 70px; }
      }
      @media (min-width: @screen-md-min) {
        text-align: right;
        .btn.dropdown-toggle { margin: 0 10px; }
        .dropdown-menu { left: 10px; }
        .input-group {
          &:first-child { margin-right: 10px; }
          .form-control {
            border: 1px solid #ccc;
            border-right: 0;
            max-width: 100px;
          }
          .input-group-addon {
            border: 1px solid #ccc;
            border-left: 0;
          }
        }
      }
    }

    .cdap-subnav-end + ul.slanted-tabs {
      li.active {
        > a, > a:hover, > a:focus {
          cursor: pointer;
        }
        .dropdown-menu {
          background-color: transparent;
          border: 0;
          margin: 0;
          padding: 0;
          > li {
            &:first-child a { .border-radius(0 8px 0 0); }
            &:last-child a { .border-radius(0 0 8px 8px ); }
            &.divider { margin: 0; }
            > a {
              color: white;
              padding: 10px;
              background-color: @cdap-header;
              &:focus { outline: none; }
              &:hover {
                background-color: white;
                color: @cdap-header;
                font-weight: 500;
              }
              > span {
                margin-top: 1px;
                margin-right: 0;
              }
            }
          }

          .dropdown-header {
            background-color: @cdap-header;
            color: white;
          }

          .list-inline {
            background-color: @cdap-header;
            margin-left: 0;
            padding-left: 0;
            padding-right: 0;

            li {
              color: white;
              cursor: pointer;
              width: 30%;
              padding: 2px 0;

              &:hover, &.selected {
                background-color: white;
                color: @cdap-header;
              }
            }
          }
        }
      }
    }

    .dropdown-menu.metric-timeselector {
      left: 15px;
      width: inherit;
    }
    .nav-tabs {
      // A
      border-bottom: 0;
      margin-bottom: 10px;
      display: flex;

      > li {
        // Exclude System tab
        &:not(:first-child) {
          > a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 80px;
            height: 42px;
            // A
            color: @cdap-gray;
            span.dtitle {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              position: relative;
              z-index: 5;
            }
            span.fa {
              line-height: 20px;
              vertical-align: top;
            }
          }
        }
      }
    }
  }
  .panel-heading {
    user-select: none;

    .btn-group {
      float: right;
      position: relative;
      right: -12px;
      top: -2px;
    }
  }

  .last-item { margin-bottom: 50px; }

  ul.dropdown-menu { z-index: 1200; } // above modal

  .gridster .gridster-item {
      color: #004756;
      bacground: transparent;
  }

  .modal {
    .modal-body {
      // This is needed for multi-select in ops add widget modal.
      overflow: visible;

      // Increasing the font size so that the label is aligned with the radio button
      .radio label {
        font-size: 14px;
      }
    }
  }
}

// @red: red;
// @green: #99FF66;
// @orange: #FF9933;
// @purple: #663399;
// @blue: #4B77BE;
// @cream: #F5D76E;
// @pink: #E08283;
// @euc: #26A65B;
// @madang: #C8F7C5;
// @lynch: #6C7A89;
// @riptide: #86E2D5;

@colors: 'red', '#99FF66', '#FF9933', '#663399', '#4B77BE', '#F5D76E', '#E08283', '#26A65B', '#C8F7C5', '#6C7A89', '#86E2D5';

.chart-color(@color) {
  .category1 {
    .line { stroke: @color; }
    .area, .dot { fill: @color; }
  }
  .arc.category1 path { fill: @color; }
  .bar.category1 { fill: @color; }
}

.loop(@counter) when (@counter > 0) {
  .loop((@counter) - 1);
  .chart-@{counter} > .epoch {
    .chart-color( e(extract(@colors, @counter)) );
  }
}

.loop(11);
